<template>
	<div>
		<!--轮播图-->
		<div class="lunbo">
				<a href="#/NaiFen"><img class="twoActive neilun" src="../assets/img/shouye/tuijian/t.png" alt=""/></a>
				<a><img class="neilun" src="../assets/img/shouye/meishi/mei1.png" alt=""/></a>
				<a><img class="neilun" src="../assets/img/shouye/tuijian/lunbo.png" alt=""/></a>
				<a><img class="neilun" src="../assets/img/shouye/muying/mu3.png" alt=""/></a>
			<!--分页器-->
			<div class="fenye">
				<span class="threeActive"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			lun: function() {
				//轮播图
				var index = 0;
				setInterval(function() {
					$(".lunbo>a").eq(index).addClass("twoActive").siblings("a").removeClass("twoActive");
					$(".fenye>span").eq(index).addClass("threeActive").siblings("span").removeClass("threeActive");
					index++;
					if(index > 5) {
						index = 0;
					}
				}, 1000);
			}
		},
		mounted:function(){
			this.lun();
		}
	}
</script>

<style>
	/*轮播图*/
	
	.lunbo {
		width: 100%;
		height: 30rem;
		background: #f2f2f2;
		position: relative;
		margin-bottom: 2rem;
	}
	.lunbo>a{
		width: 100%;
		position: absolute;
		top:0;
	}
	.lunbo>a>img{
		width: 100%;
		height: 31rem;
		display: none;
	}
	.lunbo .twoActive {
		display: block;
	}
	/*分页器*/
	
	.fenye {
		width: 100%;
		position: absolute;
		top: 27rem;
		text-align: center;
	}
	
	.fenye>span {
		display: inline-block;
		width: 1.3rem;
		height: 1.3rem;
		border: 0.3rem solid ghostwhite;
		border-radius: 50%;
		box-sizing: border-box;
		background: gray;
		margin-left: 0.8rem;
	}
	
	.fenye .threeActive {
		background: red;
	}
</style>